<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <title>Document</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/swiper.js"></script>
    <style>
        /*------------全局样式-----------*/
        html,
        body,
        ul,
        li,
        span,
        p,
        div,
        a,
        form,
        input,
        button,
        img,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        header,
        td,
        th,
        dd,
        dl,
        tr,
        table,
        footer,
        main,
        aside,
        article,
        section,
        select,
        option {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 100px;
            height: 100%;
        }

        body {
            font-size: 16px;
            height: 100%;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #app {
            position: relative;
        }

        /* header */
        .header {
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 998;
            background-color: #FFFFFF;
        }

        .header-container {
            width: 100%;
            height: 1rem;
            border-bottom: 1px solid #E0E0E0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .logo {
            width: 2.6rem;
            height: 100%;
            padding: 0 .16rem;
            display: flex;
        }

        .logo img {
            width: 100%;
            height: 100%;
        }

        .search {
            flex: 1;
            background-color: #F5F5F5;
            height: .68rem;
            border-radius: .34rem;
            display: flex;
            margin: 0 .15rem;
            align-items: center;
        }

        i {
            padding: .04rem 0 0 .2rem;
            color: #828282;
            font-weight: 600;

        }

        .iconfont {
            font-size: .32rem;
        }

        i::before {
            content: "\e627";
        }

        .ipt {
            border: none;
            background-color: #F5F5F5;
            font-size: .28rem;
            padding-left: .1rem;
            outline: none;
        }

        /* tabs */
        .tabs {
            margin-top: 1rem;
            height: .9rem;
        }

        .tabs-container {
            height: 100%;
            padding-bottom: .1rem;
            display: flex;
            position: relative;
        }

        .tabs-container a {
            height: 100%;
            color: #666666;
        }

        .item {
            padding: 0 .24rem;
            height: 100%;
        }

        .content {
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            font-size: .18rem;
            align-items: center;
        }

        .activate {
            width: .8rem;
            height: .1rem;
            background-color: #FE6A00;
            border-radius: .1rem;
            position: absolute;
            bottom: 12%;
            left: 3.5%;
        }

        .tabs-container a:nth-of-type(1) .item:nth-of-type(1) .content:nth-of-type(1) {
            width: .8rem;
            height: .8rem;
            display: flex;
            justify-content: center;
        }

        .tabs-container a:nth-of-type(4) .item:first-of-type {
            padding-right: 0;
        }

        /* banner */
        .swiper-container {
            width: 100%;
            height: 2.7rem;
        }

        .swiper-container img {
            width: 100%;
            height: 100%;
        }

        /* list */
        .list {
            width: 100%;
            height: 2.44rem;
            padding: .4rem 0 .24rem 0;
        }

        .list-item {
            width: 25%;
            float: left;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: .2rem;
            color: #898989;
        }

        .list-item img {
            width: .56rem;
            height: .56rem;
            margin-bottom: .25rem;
        }

        /* advertising */
        .advertising {
            padding: .1rem .25rem;
            height: 2.4rem;
        }

        .advertising img {
            width: 100%;
            height: 100%;
        }

        /* content */
        .list-content {
            padding: .1rem .25rem;
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
        }

        .content-item {
            flex: 1;
            height: 100%;
            margin-bottom: .3rem;
        }

        .content-item h4 {
            font-size: .34rem;
        }

        .content-img {
            display: flex;
        }

        .content-left,
        .content-right {
            flex: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .content-item .content-img img {
            width: 100%;
            height: auto;
            padding: .15rem 0;
        }

        .content-item .content-img span {
            font-size: .26rem;
        }

        .content-img .pirce {
            position: absolute;
            top: 58%;
            left: 10%;
            font-size: .2rem;
            background-color: #FF6600;
            color: #ffff;
            padding: .02rem .1rem .02rem .05rem;
            border-radius: 0 .3rem .3rem 0;
        }

        .list-content-img {
            margin-top: .1rem;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .list-content-img img:nth-of-type(1) {
            width: 31px;
            height: 100%;
            padding: 0;
            padding-right: .1rem;
        }

        .list-content-img img:nth-of-type(2) {
            width: 12px;
            height: 100%;
            padding: 0;
        }

        /* linearLayout */
        .linearLayout {
            padding: .1rem .25rem;
            height: 4.2rem;
            display: flex;
            flex-wrap: wrap;
            position: relative;
        }

        .linearLayout-arrows {
            position: absolute;
            width: .2rem;
            height: .32rem;
            top: 3%;
            right: 5%;
        }

        .linearLayout-arrows img {
            width: 100%;
            height: 100%;
        }

        .linearLayout-top {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            height: .8rem;
            margin-bottom: .2rem;
        }

        .linearLayout-top .linearLayout-title {
            font-weight: bold;
            font-size: .3rem;
            display: block;
        }

        .linearLayout-top .linearLayout-text {
            color: #898989;
            font-size: .28rem;
            display: block;
        }

        .linearLayout-bottom {
            display: flex;
            width: 100%;
        }

        .linearLayout-bottom span {
            display: block;
            font-size: .24rem;
            line-height: .25rem;
            padding: .1rem 0 .2rem 0;
        }

        .linearLayout-right span {
            padding-bottom: .45rem;
        }

        .linearLayout-bottom img {
            width: 100%;
            height: auto;
        }

        .linearLayout-left {
            flex: 1;
            background-color: #F2F2F2;
            padding: .1rem;
            margin: 0 .1rem;
        }

        .linearLayout-center {
            flex: 1;
            background-color: #F2F2F2;
            padding: .1rem;
            margin: 0 .1rem;
        }

        .linearLayout-right {
            flex: 1;
            background-color: #F2F2F2;
            padding: .1rem;
            margin: 0 .1rem;
        }

        .camera span {
            padding-bottom: .5rem;
            font-weight: bold;
            color: #767676;
        }

        /* module */
        .module {
            margin-top: .4rem;
        }

        .module h3 {
            padding: 0 .25rem .4rem .25rem;
        }

        .module-item {
            display: flex;
            flex-wrap: wrap;
        }

        .module-item a {
            flex: 50%;
            padding: 0 .25rem;
            margin-bottom: .3rem;
        }

        .module-item a img {
            width: 100%;
            height: auto;
        }

        .product-title {
            color: #6F6F6F;
            font-size: .24rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: .3rem 0;
        }

        .module-item .product-pirce {
            color: #333333;
            font-size: .32rem;
        }

        .module-item span {
            color: #333333;
            font-size: .32rem;
        }

        .product-icon {
            height: .3rem;
        }

        .product-icon img:nth-of-type(1) {
            width: .6rem;
            height: 100%;
        }

        .product-icon img:nth-of-type(2) {
            width: .3rem;
            height: 100%;
        }

        .product-icon img:nth-of-type(3) {
            width: .3rem;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- header -->
        <div class="header">
            <div class="header-container">
                <div class="logo">
                    <img src="img/logo.png" alt="">
                </div>
                <div class="search">
                    <i class="iconfont"></i>
                    <input type="text" placeholder="Search Products" class="ipt">
                </div>
            </div>
        </div>
        <!-- tabs -->
        <div class="tabs">
            <div class="tabs-container">
                <p class="activate"></p>
                <a href="#">
                    <div class="item">
                        <div class="content">All
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="item">
                        <div class="content">Consumer Electronics</div>
                    </div>
                </a>
                <a href="#">
                    <div class="item">
                        <div class="content">Apparel</div>
                    </div>
                </a>
                <a href="#">
                    <div class="item">
                        <div class="content">Vehicles & Ac</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- banner -->
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="img/banner1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/banner2.png" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!-- list -->
        <div class="list">
            <div class="list-item">
                <img src="img/list1.png" alt="">
                <span>All Categories</span>
            </div>
            <div class="list-item">
                <img src="img/list2.png" alt="">
                <span>Request for Quotation</span>
            </div>
            <div class="list-item">
                <img src="img/list3.png" alt="">
                <span>Ready to Ship</span>
            </div>
            <div class="list-item">
                <img src="img/list2.png" alt="">
                <span>Personal Protective Equipment</span>
            </div>
        </div>
        <!-- advertising -->
        <div class="advertising">
            <img src="img/advertising.png" alt="">
        </div>
        <!-- content -->
        <div class="list-content">
            <div class="content-item">
                <h4>Top-RanKing</h4>
                <div class="content-img">
                    <div class="content-left">
                        <img src="img/01.jpg" alt="">
                        <span>50+ orders</span>
                    </div>
                    <div class="content-right">
                        <img src="img/01.jpg" alt="">
                        <span>2 reviews</span>
                    </div>
                </div>
            </div>
            <div class="content-item">
                <h4>New Arrivals</h4>
                <div class="content-img">
                    <div class="content-left">
                        <img src="img/02.jpg" alt="">
                        <span>New Design</span>
                    </div>
                    <div class="content-right">
                        <img src="img/02.jpg" alt="">
                        <span>New Trend</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="content-item">
                <h4>Weekly Deals</h4>
                <div class="content-img">
                    <div class="content-left">
                        <img src="img/03.jpg" alt="">
                        <span>CN¥42.96</span>
                        <div class="pirce">
                            <p>-20%</p>
                        </div>
                    </div>
                    <div class="content-right">
                        <img src="img/03.jpg" alt="">
                        <span>CN¥15.92</span>
                        <div class="pirce">
                            <p>-10%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-item">
                <h4>Top-RanKing</h4>
                <div class="content-img">
                    <div class="content-left">
                        <img src="img/04.jpg" alt="">
                        <div class="list-content-img">
                            <img src="img/1.png" alt="">
                            <img src="img/2.png" alt="">
                        </div>
                    </div>
                    <div class="content-right">
                        <img src="img/04.jpg" alt="">
                        <div class="list-content-img">
                            <img src="img/1.png" alt="">
                            <img src="img/2.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- LinearLayout -->
        <div class="linearLayout">
            <div class="linearLayout-arrows">
                <img src="img/jiantou.png" alt="">
            </div>
            <div class="linearLayout-top">
                <span class="linearLayout-title">
                    Products with Video
                </span>
                <span class="linearLayout-text">
                    Product listings with video support
                </span>
            </div>
            <div class="linearLayout-bottom">
                <div class="linearLayout-left">
                    <span>Android Mobile Phones</span>
                    <img src="img/shop1.jpg" alt="">
                </div>
                <div class="linearLayout-center">
                    <span>Automatic Soap Dispenser</span>
                    <img src="img/shop2.jpg" alt="">
                </div>
                <div class="linearLayout-right">
                    <span>Thermometer</span>
                    <img src="img/shop3.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="linearLayout">
            <div class="linearLayout-arrows">
                <img src="img/jiantou.png" alt="">
            </div>
            <div class="linearLayout-top">
                <span class="linearLayout-title">
                    Get Inspired with These Niche Selections
                </span>
                <span class="linearLayout-text">
                    Source the basics for various occasions
                </span>
            </div>
            <div class="linearLayout-bottom camera">
                <div class="linearLayout-left">
                    <span>Gym</span>
                    <img src="img/01.jpg" alt="">
                </div>
                <div class="linearLayout-center camera">
                    <span>Spa</span>
                    <img src="img/02.jpg" alt="">
                </div>
                <div class=" linearLayout-right camera">
                    <span>Camera</span>
                    <img src="img/03.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- module -->
        <div class="module">
            <div class="module-content">
                <h3>Just for You</h3>
                <div class="module-item">
                    <a href="#">
                        <img src="./img/20.jpg" alt="">
                        <div class="product-title">
                            medical and surgical cotton disposable mask non woven fiber face mask
                        </div>
                        <div class="product-pirce">
                            CN¥1.64
                        </div>
                        <span>
                            20000
                            Boxes
                        </span>
                        <div class="product-icon">
                            <img src="img/yrs.png" alt="">
                            <img src="img/yrs2.png" alt="">
                            <img src="img/yrs3.png" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <img src="./img/21.jpg" alt="">
                        <div class="product-title">
                            medical and surgical cotton disposable mask non woven fiber face mask
                        </div>
                        <div class="product-pirce">
                            CN¥1.64
                        </div>
                        <span>
                            20000
                            Boxes
                        </span>
                        <div class="product-icon">
                            <img src="img/yrs.png" alt="">
                            <img src="img/yrs2.png" alt="">
                            <img src="img/yrs3.png" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <img src="./img/22.jpg" alt="">
                        <div class="product-title">
                            medical and surgical cotton disposable mask non woven fiber face mask
                        </div>
                        <div class="product-pirce">
                            CN¥1.64
                        </div>
                        <span>
                            20000
                            Boxes
                        </span>
                        <div class="product-icon">
                            <img src="img/yrs.png" alt="">
                            <img src="img/yrs2.png" alt="">
                            <img src="img/yrs3.png" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <img src="./img/22.jpg" alt="">
                        <div class="product-title">
                            medical and surgical cotton disposable mask non woven fiber face mask
                        </div>
                        <div class="product-pirce">
                            CN¥1.64
                        </div>
                        <span>
                            20000
                            Boxes
                        </span>
                        <div class="product-icon">
                            <img src="img/yrs.png" alt="">
                            <img src="img/yrs2.png" alt="">
                            <img src="img/yrs3.png" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <img src="./img/23.jpg" alt="">
                        <div class="product-title">
                            medical and surgical cotton disposable mask non woven fiber face mask
                        </div>
                        <div class="product-pirce">
                            CN¥1.64
                        </div>
                        <span>
                            20000
                            Boxes
                        </span>
                        <div class="product-icon">
                            <img src="img/yrs.png" alt="">
                            <img src="img/yrs2.png" alt="">
                            <img src="img/yrs3.png" alt="">
                        </div>
                    </a>
                    <a href="#">
                        <img src="./img/23.jpg" alt="">
                        <div class="product-title">
                            medical and surgical cotton disposable mask non woven fiber face mask
                        </div>
                        <div class="product-pirce">
                            CN¥1.64
                        </div>
                        <span>
                            20000
                            Boxes
                        </span>
                        <div class="product-icon">
                            <img src="img/yrs.png" alt="">
                            <img src="img/yrs2.png" alt="">
                            <img src="img/yrs3.png" alt="">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>


    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            speed: 500,
            autoplay: {
                delay: 3000
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
    </script>
</body>

</html>